<template>
  <div style="background: #f5f5f5">
    <newPageHeader></newPageHeader>

    <newSearch></newSearch>

    <div style="background-color: #fff; border-bottom: 1px solid #e6e6e6">
      <div class="company-navigate">
        <!-- <img  src="@/static/engineering5188/company/home.png" alt=""> -->
        <img src="../../../static/engineering5188/company/home.png" alt="" />
        <div>
          <span class="Thesea">线上海事展</span> >
          <span class="companyName">{{ detailInfo.catid_name }}</span> >
          <span class="companyName">{{ detailInfo.title }}</span>
        </div>
      </div>
    </div>

    <!-- 商品主图及基本信息区域 -->
    <div class="product-main">
      <div style="display: flex; padding: 30px; background-color: #fff">
        <div class="product-image">
          <detailLunbo :imageList="detailInfo.productImages" v-if="detailInfo.productImages"></detailLunbo>
        </div>
        <div class="product-details">
          <h2 class="product-name">{{ detailInfo.title }}</h2>
          <div class="price-section">
            <div style="padding: 15px 30px">
              <span class="price-label">FOB</span>
              <span class="price"><span class="priceIcon">￥</span>{{ detailInfo.price }}</span>
            </div>

            <div class="detaicJs">
              <div>
                <span class="leijie"> 累计浏览量：</span>
                <span class="ljNum">{{ detailInfo.views }}</span>
              </div>

              <div @click="newShareOn" class="fenxiang">
                <img src="../../../static/engineering5188/supplier/ShareIcon.png" alt="" />
                分享
              </div>
            </div>
          </div>
          <!-- <div class="views-section">
            <span>累计浏览量：{{product.views}}万+</span>
            <a href="#">收藏</a>
          </div> -->
          <div class="product-id-brand">
            <span>商品编号：

              <span style="color: #000000">{{ detailInfo.sn }}</span>
            </span>
            <span class="pinpan">品牌：

              <span style="color: #000000">{{ detailInfo.brandName }}</span>
            </span>
          </div>
          <div class="product-features" v-html="detailInfo.desc">

          </div>
        </div>
      </div>

      <div style="display: flex; margin-top: 24px; justify-content: space-between">
        <div>
          <!-- 介绍信息区域 -->
          <div class="product-intro" style="min-width: 964px">
            <h3 class="jieshaoTitel">介绍信息</h3>

            <div style="min-width: 904px" class="intro-text" v-html="detailInfo.content">

            </div>
          </div>

          <!-- 证书及产品资料区域 -->
          <div class="product-docs">
            <h3 class="docsTitle">证书及产品资料</h3>

            <div style="min-width: 864px">
              <div v-for="item in detailInfo.certFileImg" :key="item">
                <el-image :src="item" style="max-width: 100%; height: auto;"></el-image>
              </div>

            </div>
          </div>
        </div>

        <div>
          <!-- 公司信息及联系方式区域 -->
          <div class="company-info">
            <div>
              <div class="company-details">
                <div>
                  <img :src="shopInfo.image" alt="" class="company-logo" />
                </div>

                <div>
                  <div class="company-name">{{ shopInfo.company_title }}</div>

                  <div class="companyDiv">
                    <img class="strengthIcon" v-if="shopInfo.if_strength"
                      src="../../../static/engineering5188/homPage/strength.png" />
                    <span class="tiyanText">综合体验：</span>
                    <van-rate v-model="shopInfo.star" size="14" color="#ffd21e" disabled-color="#ffd21e" disabled />
                  </div>
                </div>
              </div>

              <div class="company-address"  @click="openMap">
                <img class="weizhiIcon" src="../../../static/engineering5188/homPage/orientation.png" alt="" />
                公司地址：{{ shopInfo.reg_address }}

                <span>查看地图</span>
              </div>
            </div>

            <div class="contact-buttons">
              <button class="call-button">
                <img src="../../../static/engineering5188/homPage/ShopTelephone.png" />
                一键拨号
              </button>
              <button class="chat-button">
                <img src="../../../static/engineering5188/homPage/message.png" />
                在线咨询
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分享 -->
    <newShare ref="newShare"  ></newShare>

    <newPageFooter></newPageFooter>
  </div>
</template>

<script>
import newShare from "./newProduct.vue";

import newPageHeader from "../../../components/page/engineering5188/new-page-header.vue";
import newPageFooter from "../../../components/page/engineering5188/new-page-footer.vue";
import newSearch from "./newProduct.vue";
import { mapState } from "vuex";
import detailLunbo from "./detailLunbo.vue";
import {openBaiduMap} from "../../../util/map"

export default {
  name: "ProductDetails",
  components: {
    newPageHeader,
    newPageFooter,
    newSearch,
    newShare,
    detailLunbo
  },
  data() {
    return {
      company_name: "受到国际旅客数量",
      product: {
        image: "https://example.com/main-ship-image.jpg",
        thumbnails: [
          "https://example.com/thumb1.jpg",
          "https://example.com/thumb2.jpg",
          "https://example.com/thumb3.jpg",
          "https://example.com/thumb4.jpg",
        ],
        name: "商品名称文字--26950吨散货船",
        price: "24000",
        views: 1,
        id: "826990623",
        brand: "VOLVO",
        intro: {
          name: "20000吨散货船",
          imo: "434223434",
          shipClass: "CCS",
          buildDate: "2010年08月",
          length: "90米",
          width: "14.7米",
          draft: "30米",
          grossTonnage: "12900",
          deadweightTonnage: "22980吨",
          crewNumber: "8",
          hatchSize: "23米",
          mainEnginePower: "2300KW",
          description:
            "该船2025年2月份交船，克令吊/Cargo gear：4*36t。此处是产品介绍信息文字此外是产品介绍信息文字此外是产品介绍信息文字此处是产品介绍信息文字此外是产品介绍信息文字此外是产品介绍信息文字此处是产品介绍信息文字此外是产品介绍信息文字此外是产品介绍信息文字图片和文字都可以。",
        },
      },
      company: {
        logo: "https://example.com/company-logo.jpg",
        name: "广州东际国际海运有限公司",
        address: "滨海新区/新港街道",
      },
      detailInfo: {},
      shopInfo: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    openMap(){
      openBaiduMap(this.shopInfo.reg_address);
    },
    getData() {
      this.$httpApi("/api/proDetail", {
        id: this.$route.query.id
      }).then(res => {
        if (res.data.thumb) {
          let temp = res.data.thumb.split(',');
          res.data.productImages = temp.map((v, i) => ({
            index: i,
            image: v,
          }));
        }

        if (res.data.imgs) {
          res.data.certFileImg = res.data.imgs.split(',');
        }
       

        this.detailInfo = res.data;
        console.log(this.detailInfo);
        this.shopInfo = res.data.shop;
      })
    },
    newShareOn() {
      this.$refs.newShare.getData(this.detailInfo);
      this.$refs.newShare.isVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
.Thesea {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #7b7b7b;

  font-style: normal;
  text-transform: none;
}

.companyName {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}

.company-navigate {
  width: 1530px;
  height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
}

.company-navigate img {
  width: 14px;
  height: 14px;
  margin-right: 12px;
}

.leijie {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #6a6a6a;

  font-style: normal;
  text-transform: none;
}

.ljNum {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 16px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}

.fenxiang {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #6a6a6a;

  font-style: normal;
  text-transform: none;
  cursor: pointer;
}

.fenxiang img {
  width: 20px;
  height: 20px;
}

.priceIcon {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #f42424;

  text-align: left;
  font-style: normal;
  text-transform: none;
}

.imgOne {
  height: 510px;
  width: 700px;
}

.docsTitle {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 25px;
}

.company-address {
  margin-top: 15px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #858792;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
}

.weizhiIcon {
  width: 12px;
  height: 16px;
}

.tiyanText {
  padding-left: 20px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #6d6d6d;

  font-style: normal;
  text-transform: none;
}

.strengthIcon {
  width: 78px;
  height: 20px;
}

.companyDiv {
  margin-top: 10px;
}

.company-name {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #000000;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.tdStype {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #222222;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.thstype {
  min-width: 171px;
  height: 44px;
  background: #fafafa;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #e8e8e8;
  text-align: center;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #676767;
  line-height: 17px;

  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.jieshaoTitel {
  margin-bottom: 25px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.price {
  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 32px;
  color: #f42424;

  font-style: normal;
  text-transform: none;
}

.detaicJs {
  min-width: 100%;
  height: 45px;
  background: #f8f8f8;
  border-radius: 0px 0px 0px 0px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 21px 0 30px;
}

/* 商品主图及基本信息区域 */
.product-main {
  width: 1530px;
  margin: 20px auto;
}

.product-image {
  width: 700px;
  height: 510px;
}

.product-image img {
  min-width: 100%;
}

.thumbnail-wrapper {
  /* position: absolute;
    bottom: 0;
    left: 0;
    min-width: 100%;
    display: flex;
    gap: 5px; */
}

.thumbnail {
  min-width: 20%;
}

.product-details {
  min-width: 50%;
  padding-left: 74px;
}

.product-name {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 24px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.price-section {
  margin-bottom: 10px;
  background-image: url("../../../static/engineering5188/homPage/detailsBg.png");
  min-width: 556px;
  height: 142px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  margin-top: 24px;
}

.price-label {
  font-weight: bold;
  margin-right: 5px;

  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 18px;
  color: #333333;

  font-style: normal;
  text-transform: none;
}

.views-section {
  margin-bottom: 10px;
}

.views-section a {
  color: #409eff;
}

.pinpan {
  padding-left: 180px;
}

.product-id-brand {
  // margin-bottom: 10px;
  min-width: 556px;
  height: 76px;
  border-bottom: 1px dotted #dedede;
  font-size: 14px;
  line-height: 76px;
  padding: 0 30px;
  color: #6a6a6a;
}

.product-features {
  min-width: 566px;
  height: 117px;
  border-bottom: 1px dashed #dedede;
  padding: 20px 32px;
  font-size: 14px;
  font-weight: 400;
}

.product-features p {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

/* 介绍信息区域 */
.product-intro {
  min-width: 964px;
  // height: 554px;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 16px 30px;
}

.intro-table {
  min-width: 100%;
  border-collapse: collapse;
}

.intro-table th,
.intro-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.intro-text {
  margin-top: 30px;
  min-height: 86px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

/* 证书及产品资料区域 */
.product-docs {
  margin-bottom: 20px;
  background-color: #fff;
  min-height: 207px;
  padding: 16px 30px;
}

.doc-item {
  margin-bottom: 10px;
}

.doc-link {
  color: #409eff;
}

.download-button {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

/* 公司信息及联系方式区域 */
.company-info {
  width: 442px;
  padding: 24px 26px;
  // display: flex;
  // align-items: center;
  min-height: 191px;
  background-color: #fff;
  margin-left: 24px;
}

.company-logo {
  width: 78px;
  height: 48px;
  margin-right: 20px;
}

.company-details {
  display: flex;
}

.contact-buttons {
  display: flex;

  gap: 15px;
}

.call-button img {
  width: 18px;
  height: 18px;
}

.call-button {
  min-width: 160px;
  height: 40px;
  background: #014bc4;
  border-radius: 4px 4px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
}

.chat-button img {
  width: 18px;
  height: 18px;
}

.chat-button {
  min-width: 160px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #014bc4;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #014bc4;
  font-style: normal;
  text-transform: none;
}

//   .call-button {
//     background-color: #00a1ff;
//     color: white;
//   }
//   .chat-button {
//     background-color: #00dd88;
//     color: white;
//   }</style>